<template>
  <div class="m-community">
    <div class="m-header">
      <div class="m-search">
        <i class="iconfont icon-sousuo icon" v-show="searchVal.length === 0"></i>
        <input type="text" class="search" name="search" v-model="searchVal" placeholder="搜索喜欢内容"/>
      </div>
      <div class="m-home-nav">
        <ul class="home-nav-list">
          <router-link class="home-nav-item" v-for="(item, index) in nav" :key="index" :to="item.url">
            {{item.text}}
          </router-link>
        </ul>
        <div class="nav-more">
          <i class="iconfont icon-gengduo"></i>
        </div>
      </div>
    </div>
    <div class="m-content">
      <div class="content-list">
        <div class="content-item">
          <div class="item-title">
            <span class="item-avatar">
              <img alt="avatar头像" src="./avatar.jpg" width="38" height="38" />
            </span>
            <div class="item-info">
              <p class="item-username">李航</p>
              <span class="time">3分钟前发布</span>
            </div>
          </div>
          <div class="item-desc">
            人是难改变的，走遍天涯海角，谁什么样还是什么样，改变的只是场景和角色
          </div>
          <div class="item-img">
            <img alt="说说图片" src="./avatar.jpg" />
          </div>
          <div class="item-oper-box">
            <span class="oper-info">
              <i class="iconfont icon-xiangqu"></i>
              <span class="num">0</span>
            </span>
            <span class="oper-info">
              <i class="iconfont icon-pinglun"></i>
              <span class="num">0</span>
            </span>
            <span class="oper-info">
              <i class="iconfont icon-shuqianbiaozhubiaojizhengshurenzhengxianxing"></i>
              <span class="num">0</span>
            </span>
            <span class="oper-info">
              <i class="iconfont icon-fenxiang"></i>
              <span class="num">0</span>
            </span>
          </div>
        </div>
      </div>
      <div class="content-list">
        <div class="content-item">
          <div class="item-title">
            <span class="item-avatar">
              <img alt="avatar头像" src="./avatar.jpg" width="38" height="38" />
            </span>
            <div class="item-info">
              <p class="item-username">李航</p>
              <span class="time">3分钟前发布</span>
            </div>
          </div>
          <div class="item-desc">
            人是难改变的，走遍天涯海角，谁什么样还是什么样，改变的只是场景和角色
          </div>
          <div class="item-img">
            <img alt="说说图片" src="./avatar.jpg" />
          </div>
          <div class="item-oper-box">
            <span class="oper-info">
              <i class="iconfont icon-xiangqu"></i>
              <span class="num">0</span>
            </span>
            <span class="oper-info">
              <i class="iconfont icon-pinglun"></i>
              <span class="num">0</span>
            </span>
            <span class="oper-info">
              <i class="iconfont icon-shuqianbiaozhubiaojizhengshurenzhengxianxing"></i>
              <span class="num">0</span>
            </span>
            <span class="oper-info">
              <i class="iconfont icon-fenxiang"></i>
              <span class="num">0</span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <tab-bar-bottom></tab-bar-bottom>
  </div>
</template>

<script>
import TabBarBottom from '@/base/tabBarBottom/tabBarBottom'
export default {
  name: 'Community',
  data () {
    return {
      searchVal: '',
      nav: [
        {url: '/community', text: '推荐'},
        {url: '/community/subscribe', text: '订阅'},
        {url: '/community/Original', text: '原创'},
        {url: '/community/topic', text: '话题'},
        {url: '/community/emotion', text: '情感'},
        {url: '/community/mind', text: '心事'},
        {url: '/community/mind', text: '广场'},
        {url: '/community/struggle', text: '励志'},
        {url: '/community/soup', text: '毒汤'},
        {url: '/community/english', text: '英文'},
        {url: '/community/movie', text: '视频'}
      ]
    }
  },
  components: {
    TabBarBottom
  }
}
</script>

<style lang="stylus" scoped>
.m-community
  padding-top 2.44rem
  background-color #f3f3f3
  .m-header
    position fixed
    left 0
    right 0
    top 0
    padding .2rem .35rem
    background-color #ffffff
    .m-search
      position relative
      .icon
        position absolute
        left 50%
        margin-left -1.68rem
        top .19rem
        color #d7d7d7
      .search
        width 100%
        box-sizing border-box
        height .76rem
        line-height .76rem
        padding .1rem
        border none
        outline none
        border-radius .4rem
        background-color #f8f8f8
        text-align center
        letter-spacing .06rem
        &::-webkit-input-placeholder
          color #d8d8d8
    .m-home-nav
      width: 100%
      box-sizing border-box
      _height .86rem
      _background-color #eeeeee
      padding .2rem 0
      z-index 200
      position relative
      .home-nav-list
        display flex
        align-items middle
        overflow auto
        margin-right 1.2rem
        .home-nav-item
          height .86rem
          line-height .86rem
          text-align center
          flex-shrink 0
          flex-basis 1.2rem
          color #a5a7a9
          font-size 14px
        .router-link-active
          color #505155
      .nav-more
        position absolute
        right .36rem
        top .42rem
        i
          font-size 18px
  .m-content
    .content-list
      margin-bottom .28rem
      background-color #ffffff
      padding 0.2rem 0.4rem
      .content-item
        .item-title
          display flex
          .item-avatar
            float left
            img
              border-radius 50%
          .item-info
            flex 1
            margin-left .3rem
            .item-username
              line-height .48rem
              font-size 15px
              padding .08rem 0
            .time
              font-size 10px
              color #d8d8d8
        .item-img
          width 100%
          height 0
          padding-bottom 44.3%
          overflow hidden
          img
            width 100%
        .item-desc
          line-height .58rem
          padding .1rem 0
          font-size 13px
          text-indent .28rem
          color #363636
        .item-oper-box
          display flex
          height 1rem
          flex-direction row
          align-items center
          text-align center
          color #98979a
          margin-top .27rem
          border-top 1px solid #f8f8f8
          .oper-info
            display block
            flex 1
            .num
              color #aaaaaa
</style>
